<template>
    <div class="list-page">
        <div class="list-page-header list-page-header-flex">
            <div class="flex-left">
                <el-button type="primary" @click="add">新增</el-button>
                <el-button type="primary" @click="edit">编辑</el-button>
                <el-popconfirm
                    title="删除该项目会同时删除项目所有信息，是否继续？"
                    confirmButtonText="确定"
                    cancelButtonText="再考虑一下"
                    @confirm="onConfirm"
                >
                    <template #reference>
                        <el-button>删除</el-button>
                    </template>
                </el-popconfirm>
            </div>
            <div class="flex-right">
                <el-input v-model="query.name" class="search-input-class" placeholder="合同名称" clearable />
                <el-button type="primary" @click="loadData">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>
        <div class="list-content">
            <el-table
                ref="datagrid"
                :data="table.data"
                border
                style="width: 100%; height: 100%"
                @row-click="handleClickTableRow"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="projectCode" label="项目编号" width="140" />
                <el-table-column prop="projectName" label="项目名称" min-width="300" show-overflow-tooltip />
                <el-table-column prop="contractNo" label="合同编号" width="140" />
                <el-table-column prop="contractName" label="合同名称" min-width="180" show-overflow-tooltip />
                <el-table-column label="合同净额（元）" width="180" show-overflow-tooltip>
                    <template #default="scope">
                        {{ scope.row.contractNetFee / 100 }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="申请日期"
                    :formatter="formatUtil.gridDateFormat"
                    min-width="140"
                />
                <el-table-column prop="stateName" label="状态" width="180" show-overflow-tooltip />
                <el-table-column prop="handlerName" label="当前处理人" width="100" show-overflow-tooltip />
                <el-table-column fixed="right" label="操作" width="140">
                    <template #default="scope">
                        <el-popconfirm
                            v-if="flowUtil.showSubmit(scope.row)"
                            title="确认提交审批吗？"
                            confirmButtonText="确定"
                            cancelButtonText="再考虑一下"
                            @confirm="flowSub(scope.row)"
                        >
                            <template #reference>
                                <el-button type="primary" size="small">提交</el-button>
                            </template>
                        </el-popconfirm>
                        <el-popconfirm
                            v-if="flowUtil.showRevoke(scope.row)"
                            title="确认撤回吗？"
                            confirmButtonText="确定"
                            cancelButtonText="再考虑一下"
                            @confirm="flowRevoke(scope.row)"
                        >
                            <template #reference>
                                <el-button type="warning" size="small">撤回</el-button>
                            </template>
                        </el-popconfirm>
                        <el-button
                            v-if="flowUtil.showApproval(scope.row)"
                            type="primary"
                            size="small"
                            @click.stop="review(scope.row)"
                        >
                            审批
                        </el-button>
                        <el-button size="small" @click.stop="review(scope.row)">查看</el-button>
                        <!-- <el-button @click.stop="printRow(scope.row)" size="small">
                            打印
                        </el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="list-footer">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="table.pagination.currentPage"
                :page-sizes="table.pagination.pageSizes"
                :page-size="table.pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="table.pagination.total"
            ></el-pagination>
        </div>
        <!-- 新增编辑合同 -->
        <transition name="slide-fade">
            <div v-if="showInfoWindow" class="list-form-modal">
                <ContractFiledForm :taskId="selectedId" @close="onClose"></ContractFiledForm>
            </div>
        </transition>
    </div>
</template>
<script setup>
import { reactive, toRefs, toRef, ref, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import http from '@/http.js'
import formatUtil from '@/utils/format.js'
import flowUtil from '@/utils/flow.js'
import ContractFiledForm from './form/ContractFiledForm.vue'

// 主页面信息
const state = reactive({
    query: {
        name: ''
    },
    table: {
        data: [],
        selected: [],
        pagination: {
            currentPage: 1,
            pageSizes: [10, 20, 50, 100],
            pageSize: 10,
            total: 0
        }
    }
})
let { query, table } = toRefs(state)

// 新增/编辑项目
const showInfoWindow = ref(false)
const selectedId = ref('')

// 加载表格
const loadData = () => {
    let params = {
        projectName: state.query.name,
        page: state.table.pagination.currentPage,
        pageSize: state.table.pagination.pageSize
    }
    http.fetchForm({
        url: '/yunying/contract/queryGrid',
        data: params
    }).then((res) => {
        state.table.data = res.data.grid
        state.table.pagination.total = res.data.total
    })
}

const reset = () => {
    state.query.name = ''
    loadData()
}

// 分页
const datagrid = ref(null)
const handleSelectionChange = (val) => {
    state.table.selected = val
}

const handleSizeChange = (val) => {
    state.table.pagination.pageSize = val
    loadData()
}

const handleCurrentChange = (val) => {
    state.table.pagination.currentPage = val
    loadData()
}

const handleClickTableRow = (row) => {
    datagrid.value.clearSelection()
    datagrid.value.toggleRowSelection(row)
}
// 新增
const add = () => {
    selectedId.value = ''
    showInfoWindow.value = true
}

// 编辑
const edit = () => {
    let selected = state.table.selected
    if (selected.length == 0) {
        ElNotification({
            title: '提示',
            message: '请选择要编辑的项目',
            type: 'info'
        })
        return
    }
    if (selected.length > 1) {
        ElNotification({
            title: '提示',
            message: '请选择单个编辑',
            type: 'info'
        })
        return
    }

    if (selected[0].state === 99) {
        ElNotification({
            title: '提示',
            message: '单据已结束，不可编辑',
            type: 'info'
        })
        return
    }
    selectedId.value = selected[0].id
    if (judge(selected[0].createBy)) {
        showInfoWindow.value = true
    } else {
        ElNotification({
            title: '提示',
            message: '操作人和创建人不匹配,无权操作',
            type: 'info'
        })
        return
    }
}

// 删除-单条
const onConfirm = () => {
    let selected = state.table.selected
    if (selected.length == 0) {
        ElNotification({
            title: '提示',
            message: '请选择要删除的菜单',
            type: 'info'
        })
        return
    }
    if (selected.length > 1) {
        ElNotification({
            title: '提示',
            message: '请选择单个删除',
            type: 'info'
        })
        return
    }

    if (selected[0].state !== 0) {
        ElNotification({
            title: '提示',
            message: '审批中/审批结束的数据无法删除',
            type: 'info'
        })
        return
    }

    if (judge(selected[0].createBy)) {
        http.fetchForm({
            url: '/yunying/contract/deleteById',
            method: 'post',
            data: {
                id: selected[0].id
            }
        }).then((res) => {
            ElNotification({
                title: '提示',
                message: '删除成功',
                type: 'success'
            })
            loadData()
        })
    } else {
        ElNotification({
            title: '提示',
            message: '操作人和创建人不匹配,无权操作',
            type: 'info'
        })
        return
    }
}

// 判断创建人是不是自己
const judge = (createBy) => {
    if (createBy === localStorage.getItem('username')) return true
    else return false
}

// 表格操作栏
// 查看
const review = (row) => {
    showInfoWindow.value = true
    selectedId.value = row.id
}

// 提交审批
const flowSub = (row) => {
    flowUtil.doSubmit(row, () => {
        loadData()
    })
}

// 撤回
const flowRevoke = (row) => {
    flowUtil.doRevoke(row, () => {
        loadData()
    })
}

// 返回主页面
const onClose = () => {
    showInfoWindow.value = false
    loadData()
}

// 款项类型转化
const payType = (param) => {
    let str = ''
    switch (param) {
        case 0:
            str = '总价'
            break
        case 1:
            str = '开口'
            break
        case 2:
            str = '结算单'
            break
        case 3:
            str = '投标补偿金'
            break
        default:
            str = '投标补偿金'
            break
    }

    return str
}

// 合同类型转化
const contractType = (param) => {
    let str = ''
    switch (param) {
        case 0:
            str = '工程咨询'
            break
        case 1:
            str = '工程施工'
            break
        case 2:
            str = '材料销售'
            break
        default:
            str = '其他'
            break
    }
    return str
}

onMounted(() => {
    loadData()
})
</script>
<style scoped>
@import '@/assets/css/list-page.css';
</style>
